<%@ include file="/WEB-INF/views/jsp/include/include.jsp"%>
<html>
<head>
<title>Hand In Hand</title>
<%@ include file="/WEB-INF/views/jsp/include/head.jsp"%>
</head>
<script type="text/javascript">
	$(document).ready(function() {
		$('#communityInfo').hide();
		$("#communityWall").show();
	});
	function info() {
		$('#communityInfo').show();
		$('#communityWall').hide();
	}
	function wall() {
		$('#communityInfo').hide();
		$('#communityWall').show();
	}
</script>
<body>
	<%@ include file="/WEB-INF/views/jsp/include/header.jsp"%>
	<%@ include file="/WEB-INF/views/jsp/include/navigator.jsp"%>
	<%@ include file="/WEB-INF/views/jsp/include/errors.jsp"%>

	<div class="container-fluid">
		<form:form id="communityViewForm" modelAttribute="communityViewForm"
			method="post"
			action="../communities/${communityViewForm.community.id}/post">
			<c:if
				test="${communityViewForm.community.privacy == 'PUBLIC' || communityViewForm.communityMember.user != null}">
				<div align="center" class="row">
					<div class="btn-group" role="group" aria-label="...">
						<c:if test="${communityViewForm.communityMember.user != null }">
							<button class="btn btn-default" type="button"
								onclick="location.href='<spring:url value="/communities/${communityViewForm.community.id}/newEvent"></spring:url>'">
								Create Event</button>
						</c:if>
						<button class="btn btn-default" type="button"
							onclick="location.href='<spring:url value="/communities/${communityViewForm.community.id}/events"></spring:url>'">
							Events of Community</button>
					</div>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<div class="btn-group" role="group" aria-label="...">
						<c:if test="${communityViewForm.communityMember.user != null }">
							<button class="btn btn-default" type="button"
								onclick="location.href='<spring:url value="/communities/${communityViewForm.community.id}/newRequest"></spring:url>'">
								Create Request</button>
						</c:if>
						<button class="btn btn-default" type="button"
							onclick="location.href='<spring:url value="/communities/${communityViewForm.community.id}/requests"></spring:url>'">
							Requests of Community</button>
					</div>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<div class="btn-group" role="group" aria-label="...">
						<c:if test="${communityViewForm.communityMember.user != null }">
							<button class="btn btn-default" type="button"
								onclick="location.href='<spring:url value="/communities/${communityViewForm.community.id}/newOffer"></spring:url>'">
								Create Offer</button>
						</c:if>
						<button class="btn btn-default" type="button"
							onclick="location.href='<spring:url value="/communities/${communityViewForm.community.id}/offers"></spring:url>'">
							Offers of Community</button>
					</div>
					<hr>
				</div>
			</c:if>



			<!--  Left Column for Community Name and Info -->
			<div style="height: 100% !important; word-break: break-word;"
				class="col-xs-3">
				<div
					style="border: 1px solid #b78f41 !important; border-radius: 10px;"
					class="col-xs-12">
					<img class="col-xs-10 col-xs-offset-1" style="margin-top: 5px;"
						src=<c:url value="/resources/images/community-icon.png"/>
						class="img-rounded"> <strong style="font-size: 16pt;"><c:out
							value="${communityViewForm.community.name}"></c:out></strong><br>
					<button style="margin-top: 5px;" class="btn btn-primary col-xs-12"
						type="button" onclick="info();">Community Info</button>
					<button style="margin-top: 5px; margin-bottom: 5px;"
						class="btn btn-primary col-xs-12" type="button" onclick="wall();">
						Community Wall</button>
					<c:if test="${communityViewForm.moderatedCommunity != null }">
						<button style="margin-top: 5px; margin-bottom: 5px;"
							class="btn btn-primary col-xs-12" type="button"
							onclick="location.href='<spring:url value="/communities/${communityViewForm.community.id}/membershiprequests"></spring:url>'">
							Membership Requests</button>
					</c:if>

				</div>
			</div>

			<div id="center" class="col-xs-6">
				<div id="communityInfo">
					<header style="font-size: 16pt;"> Info:</header>
					<br> <span
						style="font-size: 1.0em; font-style: oblique; height: 30px; overflow-wrap: break-word;">${communityViewForm.community.description}</span><br>
					<span style="font-size: 0.8em; color: gray;">(${fn:length(communityViewForm.community.members) }
						members)</span><br> <span style="font-size: 0.8em; color: gray;">Tags:<br>
						<ul>
							<c:forEach var="communityTag"
								items="${communityViewForm.communityTags}">
								<li>${communityTag.tag.tagName}</li>
							</c:forEach>
						</ul> <br></span>
				</div>


				<div id="communityWall">
					<c:if
						test="${communityViewForm.community.privacy == 'PUBLIC' || communityViewForm.communityMember.user != null}">
						<!-- Post Submit -->
						<div align="center"
							style="border: 1px solid #b78f41 !important; display: inline; border-radius: 10px; padding-bottom: 10px; padding-top: 10px;"
							class="col-xs-12">
							<table style="width: 74%;">
								<tr>
									<td style="width: 90%;"><form:textarea
											style="width:100%; height:54px; resize:none;" path="post" />
									</td>
									<td>
										<button class="btn btn-primary" style="height: 54px;"
											type="submit">Post</button>
									</td>
								</tr>
							</table>
						</div>
						<!-- Post View -->

						<c:if test="${not empty communityViewForm.wallElements }">
							<div
								style="border: 1px solid #b78f41 !important; border-radius: 10px; padding-bottom: 10px; padding-top: 10px;"
								class="col-xs-12">
								<c:forEach var="element"
									items="${communityViewForm.wallElements}">

									<div
										style="border: 1px solid #898787 !important; border-radius: 10px; margin-top: 4px; margin-bottom: 4px; padding-bottom: 3px; padding-top: 3px;"
										class="col-xs-12">

										<c:if
											test="${element.getClass().name == 'com.group9.handinhand.service.so.EventSO'}">
											<!-- 									<div style="border: 1px solid #898787 !important; border-radius:10px; margin-top: 4px; margin-bottom: 4px; padding-bottom: 3px;padding-top: 3px;" class="col-xs-12"> -->
											<img style="margin-top: 5px;" class="col-xs-2"
												src=<c:url value="/resources/images/maleicon.jpg"/>>
											<span> <a> ${element.creator.name }
													${element.creator.surname }</a> 's event <br>
											</span>
											<a class="list-group-item-warning"
												href="<spring:url value='/communities/${communityViewForm.community.id}/events/${element.id}'></spring:url>">
												${element.name} </a>
											<br>
											<div
												style="border: 1px solid #898787 !important; border-radius: 10px; margin-bottom: 4px; padding-bottom: 3px; padding-top: 3px;"
												class="col-xs-10 col-xs-offset-2">
												${element.description }</div>
										</c:if>
										<c:if
											test="${element.getClass().name == 'com.group9.handinhand.service.so.RequestSO'}">
											<!-- 									<div style="border: 1px solid #898787 !important; border-radius:10px; margin-top: 4px; margin-bottom: 4px; padding-bottom: 3px;padding-top: 3px;" class="col-xs-12"> -->
											<img style="margin-top: 5px;" class="col-xs-2"
												src=<c:url value="/resources/images/maleicon.jpg"/>>
											<span> <a> ${element.creator.name }
													${element.creator.surname }</a> 's request <br>
											</span>
											<a class="list-group-item-warning"
												href="<spring:url value='/communities/${communityViewForm.community.id}/requests/${element.id}'></spring:url>">
												${element.name} </a>
											<br>
											<div
												style="border: 1px solid #898787 !important; border-radius: 10px; margin-bottom: 4px; padding-bottom: 3px; padding-top: 3px;"
												class="col-xs-10 col-xs-offset-2">
												${element.description }</div>
											<!-- 									</div> -->
										</c:if>
										<c:if
											test="${element.getClass().name == 'com.group9.handinhand.service.so.OfferSO'}">
											<!-- 									<div style="border: 1px solid #898787 !important; border-radius:10px; margin-top: 4px; margin-bottom: 4px; padding-bottom: 3px;padding-top: 3px;" class="col-xs-12"> -->
											<img style="margin-top: 5px;" class="col-xs-2"
												src=<c:url value="/resources/images/maleicon.jpg"/>>
											<span> <a> ${element.creator.name }
													${element.creator.surname }</a> 's offer <br>
											</span>
											<a class="list-group-item-warning"
												href="<spring:url value='/communities/${communityViewForm.community.id}/offers/${element.id}'></spring:url>">
												${element.name} </a>
											<br>
											<div
												style="border: 1px solid #898787 !important; border-radius: 10px; margin-bottom: 4px; padding-bottom: 3px; padding-top: 3px;"
												class="col-xs-10 col-xs-offset-2">
												${element.description }</div>
											<!-- 									</div> -->
										</c:if>
										<c:if
											test="${element.getClass().name == 'com.group9.handinhand.service.so.CommunityPostSO'}">
											<!-- 									<div style="border: 1px solid #898787 !important; border-radius:10px; margin-top: 4px; margin-bottom: 4px; padding-bottom: 3px;padding-top: 3px;" class="col-xs-12"> -->
											<img style="margin-top: 5px;" class="col-xs-2"
												src=<c:url value="/resources/images/maleicon.jpg"/>>
											<span> <a> ${element.user.name }
													${element.user.surname }</a> 's post
											</span>
											<br>
										 ${element.context}
<!-- 									</div> -->
										</c:if>
									</div>

								</c:forEach>

							</div>
						</c:if>
					</c:if>
				</div>
				<!-- 				end of wall -->

			</div>
			<!-- 			end of center -->
			<div class="col-xs-3">
				<div>
					<c:if
						test="${communityViewForm.communityMember.user == null && communityViewForm.community.permission == 'NONE'}">
						<button class="btn btn-primary" type="button"
							onclick="location.href='<spring:url value="/communities/${communityViewForm.community.id}/joincommunity"></spring:url>'">
							Join Community</button>
					</c:if>
				</div>

				<div>
					<c:if
						test="${communityViewForm.communityMember.user == null && communityViewForm.community.permission == 'MODERATOR_PERMISSION' && communityViewForm.membershipRequest == null }">
						<button class="btn btn-primary" type="button"
							onclick="location.href='<spring:url value="/communities/${communityViewForm.community.id}/sendmembership"></spring:url>'">
							Send Membership Request</button>
					</c:if>
				</div>

				<c:if
					test="${communityViewForm.communityMember.user == null && communityViewForm.community.permission == 'MODERATOR_PERMISSION' && communityViewForm.membershipRequest != null }">
					<div
						style="border: 1px solid #b78f41 !important; border-radius: 10px; margin-left: 3px; margin-right: 3px; padding-bottom: 10px; padding-top: 10px;"
						class="col-xs-8">Membership request sent</div>
				</c:if>

				<div>
					<c:if test="${communityViewForm.moderatedCommunity != null }">
						<button class="btn btn-primary" type="button"
							onclick="location.href='<spring:url value="/communities/${communityViewForm.community.id}/editCommunity"></spring:url>'">
							Edit Community</button>
					</c:if>
				</div>
				<br>

				<!--  RECOMMENDATION	 -->
			
				<div
					style="border: 1px solid #b78f41 !important; border-radius: 10px; margin-left: 3px; margin-right: 3px; padding-bottom: 10px; padding-top: 10px;"
					class="col-xs-8">
					<strong>RECOMMENDATIONS</strong>
					<c:forEach var="community" items="${communityViewForm.commList}">
					
			
						<div
							style="overflow: hidden; border: 1px solid #898787 !important; border-radius: 10px; margin-top: 4px; margin-bottom: 4px; margin-left: 2px; margin-right: 2px; padding-bottom: 3px; padding-top: 3px;"
							>
						
							<div style="padding-top: 6px; padding-bottom: 6px; padding-left: 4px; padding-right: 4px;">
								<a class="list-group-item-warning"
									href="<spring:url value='/communities/${community.id}'></spring:url>">
									<strong style="font-size: 0.9em; overflow-wrap: break-word;">${community.name}</strong>
								</a> <br> <span style="font-size: 0.7em; color: gray;">${fn:length(community.members) }
											members</span><br> <span
									style="font-size: 0.8em; font-style: oblique; height: 30px; overflow-wrap: break-word;">${community.description}</span>

							</div>
						</div>
					</c:forEach>
				</div>
			

			</div>


		</form:form>
	</div>

	<%@ include file="/WEB-INF/views/jsp/include/footer.jsp"%>

</body>
</html>